<%--
  Created by IntelliJ IDEA.
  User: DELL
  Date: 2024/4/16
  Time: 19:31
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>管理员列表</title>
    <link rel="stylesheet" href="/static/layui/css/layui.css">
    <script src="/static/jquery-2.1.4.js" type="text/javascript" charset="utf-8"></script>
    <script src="/static/layui/layui.js" type="text/javascript" charset="utf-8"></script>
    <script src="/static/mylayer.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>

    <!--顶部：搜索form表单-->
    <form class="layui-form layui-row layui-col-space16">
        管理员名称：
        <div class="layui-inline layui-input-wrap">
            <input type="text" name="name" lay-affix="clear" class="layui-input">
        </div>
        <div class="layui-inline">
            <button class="layui-btn" lay-submit lay-filter="submitSearch">Search</button>
            <button type="reset" class="layui-btn layui-btn-primary">Clear</button>
        </div>
    </form>


    <!--页内容-->
    <table class="layui-hide" id="test" lay-filter="test"></table>
    <%--左上角：头部工具栏事件---批量删除、添加--%>
    <script type="text/html" id="toolbarDemo">
        <div class="layui-btn-container">
            <button class="layui-btn layui-btn-sm" lay-event="add">添加</button>
            <button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="deleteAll">批量删除</button>
        </div>
    </script>
    <%--右侧：触发单元格工具事件---单个元素的删除、编辑--%>
    <script type="text/html" id="barDemo">
        <div class="layui-clear-space">
            <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="delete">删除</a>
            <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        </div>
    </script>

        <%--添加form表单--%>
        <div id="addForm" style="display:none;">
            <form class="layui-form" action="">
                <div class="layui-form-item">
                    <label class="layui-form-label">账号</label>
                    <div class="layui-input-block">
                        <input type="text" name="name" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">密码</label>
                    <div class="layui-input-block">
                        <input type="text" name="password" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button type="submit" class="layui-btn" lay-submit lay-filter="submitAdd">立即提交</button>
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    </div>
                </div>
            </form>
        </div>


        <%--修改form表单--%>
        <div id="updateForm" style="display:none;">
            <form class="layui-form" lay-filter="updateFormFilter" action="">
                <input type="hidden" name="id"> <%--隐藏id--%>
                <div class="layui-form-item">
                    <label class="layui-form-label">账号</label>
                    <div class="layui-input-block">
                        <input type="text" name="name" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">密码</label>
                    <div class="layui-input-block">
                        <input type="text" name="password" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button type="submit" class="layui-btn" lay-submit lay-filter="submitUpdate">立即修改</button>
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    </div>
                </div>
            </form>
        </div>

        <script>
            layui.use(['form','table'],function (){
                var form = layui.form;
                var table = layui.table;
                // 创建渲染实例
                table.render({
                    elem:'#test',
                    id:'tableId',
                    url:'/user?method=selectByPage',
                    toolbar: '#toolbarDemo',
                    cols:[[
                        {type:'checkbox',fixed: 'left'}, /*左侧复选框*/
                        {field:'id',title:'ID',sort:true},
                        {field: 'name',title: '账号'},
                        {field: 'password',title: '密码'},
                        {field: 'email',title: '邮件',sort:true},
                        {field: 'phone',title: '电话',sort:true},
                        {fixed:'right',title: '操作',width:134,minWidth:125,toolbar:'#barDemo'}
                    ]],
                    page: true
                });

                //搜索提交
                form.on('submit(submitSearch)',function (data) {
                    //获得表单字段
                    var field = data.field;
                    //执行搜索重载
                    table.reload('tableId',{
                        page: {
                            //重新从第1页开始
                            curr:1
                        },
                        //搜索的字段
                        where:field
                        //http://localhost:8080/banji?method=selectByPage&page=1&limit=10&name=zhansgsan&address=5&time=2014
                    });
                    //阻止默认 form跳转
                    return false;
                });

                //头部工具栏事件---批量删除、添加
                table.on('toolbar(test)',function (obj) {
                    var id = obj.config.id;
                    var checkStatus = table.checkStatus(id);
                    var othis = lay(this);

                    switch (obj.event){
                        //----------------------添加------------------------------
                        case 'add':
                            var index = layer.open({
                                type:1,
                                title:'添加数据',
                                area:['500px','300px'],// 宽高
                                content: $('#addForm').html()
                            });
                            //绑定提交事件
                            form.on('submit(submitAdd)',function (data) {
                                //获取表单字段
                                var field = data.field;
                                console.log(data);
                                // 此处可执行 Ajax 等操作
                                $.post(
                                    '/user?method=add',
                                    field,
                                    function (result) {
                                        console.log(result);
                                        if (result.code == 0){
                                            mylayer.okMsg(result.msg);
                                            layer.close(index);
                                            table.reload('tableId');
                                        } else {
                                            mylayer.errorMsg(result.msg);
                                        }
                                    },
                                    'json'
                                );
                                return false;//阻止默认form跳转
                            });
                            break;
                        //-------------------------删除------------------------------
                        case 'deleteAll':
                            var data = checkStatus.data;
                            var ids = new Array();
                            $(data).each(function () {
                                ids.push(this.id);
                            })
                            layer.confirm(
                                '您确认要删除吗？',
                                {icon:3},
                                function (index) {
                                    $.post(
                                        '/user?method=deleteAll',
                                        {'ids':ids},
                                        function (result) {
                                            console.log(result);
                                            if (result.code == 0){
                                                mylayer.okMsg(result.msg);
                                                //删除成功之后刷新表格，展示最新数据
                                                table.reload('tableId')
                                            } else {
                                                mylayer.errorMsg(result.msg);
                                            }
                                        },
                                        'json'
                                    );
                                }
                            );
                            break;
                        case 'LAYTABLE_TIPS':
                            layer.alert('自定义工具栏图标按钮');
                            break;
                    }
                });

                //触发单元格工具事件---单个元素的删除、编辑
                table.on('tool(test)',function (obj) {
                    //获得当前行数据
                    var data = obj.data;
                    console.log(obj)
                    if (obj.event == 'delete'){
                        layer.confirm(
                            '您确认要删除吗？',
                            {icon:3},
                            function (index) {
                                $.post(
                                    '/user?method=deleteById',
                                    {'id':data.id},
                                    function (result) {
                                        console.log(result);
                                        if (result.code == 0){
                                            mylayer.okMsg(result.msg);
                                            //删除成功之后刷新表格，展示最新数据
                                            table.reload('tableId')
                                        } else {
                                            mylayer.errorMsg(result.msg);
                                        }
                                    },
                                    'json'
                                );
                            }
                        );
                        //---------------------编辑-------------------------------
                    } else if (obj.event === 'edit'){
                        var index = layer.open({
                            type:1,
                            title:'编辑数据',
                            area:['500px','300px'],// 宽高
                            content:$('#updateForm').html(),
                            success:function () {
                                //form.val有两个参数，第一个是form表单的lay-filter名字，
                                //第二个参数是json对象：{"id": 1,"name": "Java1807","address": "dfdf","time": "3434"}
                                //将第二个参数的值按照“名字”映射到form表单中
                                $.post(
                                    '/user?method=selectById',
                                    {'id':data.id},
                                    function (result) {
                                        //console.log(result);
                                        if (result.code == 0){
                                            form.val('updateFormFilter',result.data);
                                        }
                                    },
                                    'json'
                                );
                            }
                        });
                        //绑定提交事件
                        form.on('submit(submitUpdate)',function (data) {
                            //获取表单字段
                            var field = data.field;
                            console.log(data);
                            // 此处可执行 Ajax 等操作
                            $.post(
                                '/user?method=update',
                                field,
                                function (result) {
                                    console.log(result);
                                    if (result.code == 0) {
                                        mylayer.okMsg(result.msg);
                                        layer.close(index);
                                        table.reload('tableId');
                                    } else {
                                        mylayer.errorMsg(result.msg);
                                    }
                                },
                                'json'
                            );
                            return false;//阻止默认form跳转
                        });
                    }
                });
            });
        </script>

</body>
</html>
